import React from 'react'
import { useLocation } from 'react-router-dom'
import { UserOutlined, TeamOutlined } from '@ant-design/icons'
import { Avatar } from 'antd'
import style from './index.module.scss'

const chatList: any[] = []
for (let i = 0; i < 10; i++) {
    chatList.push({
        _id: 'wifi' + 1,
        imgUrl: 'https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png',
        name: 'user' + i
    })
}

const ChatList: React.FC = () => {

    const { pathname } = useLocation()

    return <div className={`${style.chatContent} scrollbar-hidden`}>
        <div className={style.chatList}>
            {
                chatList.map((item, index) => {
                    return <div className={`${style.chatItem} ${index === 1 ? style.active : ''}`} key={index}>
                        <div className={style.img}>
                            {
                                pathname === '/message/private'
                                    ? <Avatar src={item.imgUrl} icon={<UserOutlined />} />
                                    : <Avatar src={item.imgUrl} icon={<TeamOutlined />} />
                            }
                        </div>
                        <div className={`${style.name} text-hidden`}>
                            {item.name}
                        </div>
                    </div>
                })
            }
        </div>
    </div>
}

export default ChatList